<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe7ca;</div>
    </div>
    <div class="header-input"><span class="iconfont">&#xe645;</span>输入城市/景点/游玩主题</div>
    <router-link to="/city">
      <div class="header-right">
        {{this.city}}
        <!--{{this.doubleCity}}-->
        <!--{{this.$store.state.city}}-->
        <span class="iconfont arrow-icon">&#xe65a;</span>
      </div>
    </router-link>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState(['city']),
    ...mapGetters(['doubleCity'])
  }
  /* props: {
    city: String
  } */
}
</script>
<!--采用stylus插件 scoped只对当前组件有效不会对其他组件产生影响-->
<!-- 1rem = html font-size = 50px  -->
<style lang="stylus" scoped>
 @import '~styles/varibies.styl'
 .header
    display: flex
    line-height: $headerHeight
    background: $bgColor
    color: #fff
   .header-left
     width: .64rem
     float: left
     .back-icon
      text-align center
      font-size: .4rem
   .header-input
     flex: 1
     height:.64rem
     line-height: .64rem
     margin-top: .12rem
     margin-left:.2rem
     background: #fff
     padding-left: .2rem
     border-radius: .1rem
     color: #ccc
   .header-right
     min-width: 1.04rem
     padding: 0 .1rem
     float: right
     text-align center
     color: #fff
     .arrow-icon
       margin-left: .04rem
       fonr-size: .24rem
</style>
